<template>
  <el-dialog
    v-model="visible"
    :title="$t('developer.operate_apply_cert')"
    class="developer-apply-cert"
    @close="cancel"
  >
    <el-form label-position="top" :model="dataForm" ref="dataForm" :rules="rules">
      <el-form-item :label="$t('developer.common_name') + ':'" prop="commonName">
        <el-input
          v-model.trim="dataForm.commonName"
          :maxlength="64"
          show-word-limit
          @keyup.native="dataForm.commonName = dataForm.commonName.replace(/\s+/g, '')"
          @blur="() => (dataForm.commonName = dataForm.commonName.trim())"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('developer.countryCode') + ':'">
        <el-input v-model="dataForm.country" :maxlength="64" disabled></el-input>
      </el-form-item>
      <el-form-item :label="$t('developer.province_name') + ':'" prop="provinceName">
        <el-input
          v-model="dataForm.provinceName"
          :maxlength="64"
          show-word-limit
          @blur="() => (dataForm.provinceName = dataForm.provinceName.trim())"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('developer.locality_name') + ':'" prop="localityName">
        <el-input
          v-model="dataForm.localityName"
          :maxlength="64"
          show-word-limit
          @blur="() => (dataForm.localityName = dataForm.localityName.trim())"
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="$t('developer.organization_name') + ':'"
        prop="organizationName"
      >
        <el-input
          v-model="dataForm.organizationName"
          :maxlength="64"
          show-word-limit
          @blur="() => (dataForm.organizationName = dataForm.organizationName.trim())"
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="$t('developer.organization_unit_name') + ':'"
        prop="organizationUnitName"
      >
        <el-input
          v-model="dataForm.organizationUnitName"
          :maxlength="64"
          show-word-limit
          @blur="
            () => (dataForm.organizationUnitName = dataForm.organizationUnitName.trim())
          "
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('developer.email') + ':'">
        <el-input v-model="dataForm.emailAddress" :maxlength="64" disabled></el-input>
      </el-form-item>
      <el-form-item :label="$t('developer.custom_name') + ':'">
        <el-input v-model="dataForm.cusName" :maxlength="128" disabled></el-input>
      </el-form-item>
      <el-form-item :label="$t('developer.custom_desc') + ':'" prop="cusDesc">
        <el-input
          v-model="dataForm.cusDesc"
          :maxlength="128"
          show-word-limit
          @blur="() => (dataForm.cusDesc = dataForm.cusDesc.trim())"
        ></el-input>
      </el-form-item> </el-form
    ><template #footer>
      <span class="dialog-footer">
        <el-button text @click="cancel">{{ $t("common.cancel") }}</el-button>
        <el-button type="primary" :loading="loading" @click="submit">{{
          $t("common.submit")
        }}</el-button>
      </span></template
    >
  </el-dialog>
</template>
<script>
import { formatDate } from "@/utils/formatDate";
import { formatCountry } from "@/utils/formatCountry";
import { applyCert } from "@/api/developer";
import { getCountryList } from "@/api/user";
export default {
  data() {
    return {
      visible: false,
      loading: false,
      dataForm: {
        developerId: "",
        developerName: "",
        commonName: "",
        country: "",
        countryName: "",
        provinceName: "",
        localityName: "",
        organizationName: "",
        organizationUnitName: "",
        emailAddress: "",
        cusName: "",
        cusDesc: "",
      },
    };
  },
  computed: {
    rules() {
      return {
        commonName: [
          {
            required: true,
            message: this.$t("developer.rule_tip.common_name"),
            trigger: "blur",
          },
        ],
        provinceName: [
          {
            required: true,
            message: this.$t("developer.rule_tip.province_name"),
            trigger: "blur",
          },
        ],
        localityName: [
          {
            required: true,
            message: this.$t("developer.rule_tip.locality_name"),
            trigger: "blur",
          },
        ],
        organizationName: [
          {
            required: true,
            message: this.$t("developer.rule_tip.organization_name"),
            trigger: "blur",
          },
        ],
        organizationUnitName: [
          {
            required: true,
            message: this.$t("developer.rule_tip.organization_unit_name"),
            trigger: "blur",
          },
        ],
        cusDesc: [
          {
            required: true,
            message: this.$t("developer.rule_tip.custom_desc"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  methods: {
    init(developer) {
      this.getCountryList(developer.countryCode);
      this.visible = true;
      if (developer.developerType === 1) {
        this.dataForm.commonName = developer.contactName.replace(/ /g, "_") + "_P_AS";
      } else {
        this.dataForm.commonName = developer.firstName.replace(/ /g, "_") + "_C_AS";
      }
      this.dataForm.countryName = developer.countryCode;
      this.dataForm.emailAddress = developer.email;
      this.dataForm.developerId = developer.developerId;
      if (developer.developerType === 1) {
        this.dataForm.cusName = developer.contactName;
        this.dataForm.developerName = developer.contactName;
      } else {
        this.dataForm.cusName = developer.firstName;
        this.dataForm.developerName = developer.firstName;
      }
    },
    cancel() {
      this.visible = false;
      this.$emit("close");
    },
    formatCountry(value) {
      return formatCountry(value);
    },
    submit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.loading = true;
          applyCert(this.dataForm)
            .then((data) => {
              if (data) {
                this.loading = false;
                if (data) {
                  const link = document.createElement("a");
                  link.style.display = "none";
                  link.setAttribute("target", "tempframe");
                  link.setAttribute(
                    "href",
                    import.meta.env.VITE_APP_BASE_API +
                      "/online/developer-admin/developer/" +
                      this.dataForm.developerId +
                      "/cert"
                  );
                  link.click();
                } else {
                  this.$message({
                    type: "error",
                    message: this.$t("developer.cert_download_fail_tip"),
                  });
                }

                this.cancel();
                this.$emit("refreshDataList");
              }
            })
            .catch((e) => {
              this.loading = false;
              this.$confirmError(e);
            });
        }
      });
    },
    formatDate(cellValue, fmt) {
      return formatDate(cellValue, fmt);
    },
    getCountryList(areaCode) {
      getCountryList()
        .then((data) => {
          data.forEach((item) => {
            if (item.countryCode3 === areaCode) {
              this.dataForm.country = item.countryNameEn;
            }
          });
        })
        .catch((e) => {
          this.$confirmError(e);
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>
